<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <title>章节管理</title>
        <include file='Layout:ins_css' />
        <style type="text/css">
            #addChapterBtn {
                float: right;
                margin: -7px -6px 9px;
            }
            #addSectionBtn{
            		float: right;
                margin: -7px -6px 9px;
            }
            .cyf_selected {
				font-size: large;
				color: #F1A417;
			}

        </style>
    </head>
    <body class="single">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
               <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>章管理</h5>
                            <button class="btn btn-primary" id="addChapterBtn">新增</button>
                        </div>
                        <div class="row s-row">
                            <div class="col-sm-12">
                                <div class="price-div">
                                    <form class="form-horizontal">
                                        <div class="form-group cyf-form-group">
                                            <div class="col-sm-8" style="margin-top: 10px; margin-bottom: 10px">
                                                <label style="float: left;" class="col-sm-4 control-label cvbnm">课程: </label>
                                                <select class="form-control col-sm-" id="course_id" name="course_id" style="min-height: 35px">
                                                    <option value="0">全部</option>
                                                    <volist name="course_info" id="vo">
                                                        <option value="{$vo.cou_id}">{$vo.name}</option>
                                                    </volist>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group cyf-form-group">
                                        	<div class="col-sm-8" style="margin-top: 10px; margin-bottom: 10px">
                                                <label style="float: left;" class="col-sm-4 control-label cvbnm">教学方案: </label>
                                                <select class="form-control col-sm-" id="teacher_method_id" name="teacher_method_id" style="min-height: 35px">
                                                    <option value="0">全部</option>
                                                    <volist name="teacher_medthod_info" id="vo">
                                                        <option value="{$vo.id}" pid="{$vo.cou_id}" style="display: none">{$vo.me_name}</option>
                                                    </volist>
                                                </select>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-striped table-bordered table-hover dataTables-example" id="chapterTable">
                                <thead>
                                <tr>
                                	<th class="33.33%">序号</th>
                                    <th width="33.33%">名称</th>
                                    <th width="33.33%">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>节管理</h5>
                            <button class="btn btn-primary" id="addSectionBtn" disabled="disabled">新增</button>
                        </div>
                        <div class="ibox-content">
							<table class="table table-striped table-bordered table-hover dataTables-example" id="sectionTable">
                                <thead>
	                                <tr>
	                                	<th class="33.33%">序号</th>
	                                    <th width="33.33%">名称</th>
	                                    <th width="33.33%">操作</th>
	                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal 新增编辑章-->
        <div class="modal fade" id="ChapterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="ChapterModalLabel"></h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="chapter_form_add">
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">教学方案</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly="readonly" id="add_tme_num" name="add_tme_num" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">章名称</label>
                                <div class="col-sm-7">
                                    <input type="text" id="add_chapter_name" name="add_chapter_name" class="form-control removeData">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="add_chapter_btn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal 新增编辑节-->
        <div class="modal fade" id="SectionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="SectionModalLabel"></h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="form_add">
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">章名称</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly="readonly" id="add_section_chapter_name" name="add_section_chapter_name" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">节名称</label>
                                <div class="col-sm-7">
                                    <input type="text" id="add_section_name" name="add_section_name" class="form-control removeData">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="add_section_btn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <include file='Layout:ins_js' />
        <script  type="text/javascript" src="__ROOT__/Public/js/dataTables.rowReorder.min.js"></script>
        <script type="text/javascript">
        		chapter_id = -1;
        		chapter_name = '';
            $(document).ready(function () {
               check_index();
                //章table
                cTable = $("#chapterTable").DataTable({
                    "fnServerParams": function (aoData) {
                        aoData.push({
                            'name': 'teacher_method_id',
                            'value': $('select#teacher_method_id option:selected').val(),
                        });
                    },
                    "order": [[0, "asc"]],
                    //              "aaSorting": [
                    //                  [0, "asc"]
                    //              ],
                    "bAutoWidth": false,
                    "oLanguage": {
                        "sLengthMenu": "每页 _MENU_ ",
                        "sProcessing": "处理中...",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索:",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                    },
                    "rowReorder": {
                        dataSrc: 'cha_order'
                    },
                    "sAjaxSource": "__URL__/chapter_ShowDatatables", //调用php后台接口方法地址
                    "aoColumns": [{
                        'data'  : 'cha_order',
                    },{
                        'data': 'cha_name'
                    }, {
                        "data": null,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<a type="button" class="btn btn-success" href="#" onclick=editChapterFromID(this) >编辑</a>|<a type="button" class="btn btn-danger" href="#" onclick=delChapterFromID(this) >删除</a>'
                        }
                    }]
                });
                cTable.on('row-reorder',function(e,diff,edit){
                    var exchangeList = [];
                    var result = 'Reorder started on row: '+eval(edit.triggerRow.data())+'<br>';
                    for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
                        var rowData = cTable.row( diff[i].node ).data();
                        result += rowData+' updated to be in position '+
                            diff[i].newData+' (was '+diff[i].oldData+')<br>';
                        exchangeList.push(rowData.cha_id+','+diff[i].newData);
                    }
					console.info( 'Event result:<br>'+result );
                    reOrder(exchangeList);
                });
                //节table
                sTable = $("#sectionTable").DataTable({
                    "fnServerParams": function (aoData) {
                        aoData.push({
                            'name': 'chapter_id',
                            'value': chapter_id
                        });
                    },
                    "order": [[0, "asc"]],
                    //              "aaSorting": [
                    //                  [0, "asc"]
                    //              ],
                    "bAutoWidth": false,
                    "oLanguage": {
                        "sLengthMenu": "每页 _MENU_ ",
                        "sProcessing": "处理中...",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索:",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                    },
                    "rowReorder": {
                        dataSrc: 'sec_order'
                    },
                    "sAjaxSource": "__URL__/section_ShowDatatables", //调用php后台接口方法地址
                    "aoColumns": [{
                        'data'  : 'sec_order',
                    },{
                        'data': 'sec_name'
                    }, {
                        "data": null,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<a type="button" class="btn btn-success" href="#" onclick=editSectionFromID(this) >编辑</a>|<a type="button" class="btn btn-danger" href="#" onclick=delSectionFromID(this) >删除</a>'
                        }
                    }]
                });
                sTable.on('row-reorder',function(e,diff,edit){
                    var exchangeList = [];
                    var result = 'Reorder started on row: '+eval(edit.triggerRow.data())+'<br>';
                    for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
                        var rowData = sTable.row( diff[i].node ).data();
                        result += rowData+' updated to be in position '+
                            diff[i].newData+' (was '+diff[i].oldData+')<br>';
                        exchangeList.push(rowData.cha_id+','+diff[i].newData);
                    }

                    console.info( 'Event result:<br>'+result );
                    reOrder_Sec(exchangeList);
                });
                //章的点击事件
				$('#chapterTable tbody').on('click', 'tr', function() {     

					if($(this).hasClass('cyf_selected')) {          
						//$(this).removeClass('cyf_selected');  
						cTable.$('tr.cyf_selected').removeClass('cyf_selected');     
						chapter_id = -1; 
						chapter_name = ''; 
						$('#sectionTable').DataTable().ajax.reload(); 
						$("#addSectionBtn").attr('disabled', true);
					} else {            
						cTable.$('tr.cyf_selected').removeClass('cyf_selected');            
						$(this).addClass('cyf_selected'); 
						var rowdata = cTable.row(this).data(); 
						chapter_id = rowdata.cha_id;
						chapter_name = rowdata.cha_name;
						//classificationStationname = rowdata.station_name;
						//console.log(classification_id);
						$('#sectionTable').DataTable().ajax.reload();
						$("#addSectionBtn").attr('disabled', false);
					}    
				});
            });
            function reOrder(param){
                $.ajax({
                    type: "post",
                    url: "__URL__/reOrder",
                    async: true,
                    data: {
                        "exchangeList":param
                    },
                    error: function(request) {
//								toastr.warning("Connection error");
                        alert("Connection error");
                    },
                    dataType: 'json',
                    success: function(p) {
                        if(p.state == true) {
//							toastr.success(p.info);
                            cTable.ajax.reload();
                            // $('#add_brands_name').val('');
                            // $('#upload_logo').fileinput('clear');
                            // $('#paramModal').modal('hide');
                            // sTable.ajax.reload();
                        } else {
                            toastr.error(p.info);
                            // $('#add_brands_name').val('');
                        }
                        sil_reloading();
                    }
                });
            }
			function reOrder_Sec(param){
                $.ajax({
                    type: "post",
                    url: "__URL__/reOrder_Sec",
                    async: true,
                    data: {
                        "exchangeList":param
                    },
                    error: function(request) {
//								toastr.warning("Connection error");
                        alert("Connection error");
                    },
                    dataType: 'json',
                    success: function(p) {
                        if(p.state == true) {
							sTable.ajax.reload();
                        } else {
                            toastr.error(p.info);
                        }
                        sil_reloading();
                    }
                });
            }
            //查询按钮
            $("select#course_id").change(function() {
                var p_id = $("#course_id").val();
                $("#teacher_method_id option").hide();
                $('#teacher_method_id').val('0');
                $('#teacher_method_id option[pid=' + p_id + ']').show();
            });
            $("select#teacher_method_id").change(function() {
                cTable.ajax.reload();
            });
            //新增章model弹出
            $('#addChapterBtn').on('click',function () {
                    var  teacher_method_id = $('select#teacher_method_id option:selected').val();
                    var  teacher_method_text = $("#teacher_method_id").find("option:selected").text();
                    if(teacher_method_id == 0){
                        toastr.info("请选择教学方案");

                    }else {
                        document.getElementById("ChapterModalLabel").innerText = "新增章";
                        $('#add_tme_num').val(teacher_method_text);
                        $('#ChapterModal').modal();
                    }
            });
            //编辑章model弹出
            function editChapterFromID() {
                document.getElementById("ChapterModalLabel").innerText = "编辑章";
                $('#ChapterModal').modal();
            }
            $('#add_chapter_btn').on('click',function () {
                var formData = $('#form_add').serializeArray();
                var model_title = $('#ChapterModal').text();
                var postData = {};
                $(formData).each(function(i) {
                    postData[this.name] = this.value;
                });
                if(model_title.trim() == "新增章"){
                    sil_loading();
                    $.ajax({
                        type: "post",
                        url: "__URL__/add_chapter",
                        async: true,
                        data: postData,
                        dataType: 'json',
                        success: function(p) {
                            if(p.state) {
                                toastr.success(p.info);
                                $("#Modal").modal('hide');
                                sTable.ajax.reload();
                            } else {
                                toastr.warning(p.info);
                            }
                            sil_reloading();
                        }
                    });
                }else if(model_title.trim() == "编辑章"){

                }

            });



             //新增章model弹出
             $('#addSectionBtn').on('click',function () {
                 $('#add_section_chapter_name').val(chapter_name);
                 $('#SectionModal').modal();
             });

            //删除章
            function delChapterFromID(obj) {
                $row = $(obj).parent().parent();
                cTable.$('tr').addClass('cyf_selected');
                var row = cTable.row($row).data();
                swal({
                    title: '确定要删除吗?',
                    text: '该章将删除',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                }).then(function(isConfirm) {
                    if(isConfirm === true) {
                        sil_loading();
                        $.ajax({
                            type: "post",
                            url: "__URL__/delSeries",
                            data: {
                                'series_id': row.series_id,
                            },
                            dataType: "json",
                            async: true,
                            error: function(request) {
                                toastr.warning("Connection error");
                            },
                            success: function(data) {
                                if(data.state == true) {

                                    toastr.success(data.info);
                                    $('#seriesTable').DataTable().ajax.reload();
                                } else {

                                    toastr.warning(data.info);
                                }
                                sil_reloading();
                            }
                        });
                    } else if(isConfirm === false) {

                    } else {

                    }
                });
            }
            //删除节
            function delSectionFromID(obj) {
                $row = $(obj).parent().parent();
                var row = sTable.row($row).data();
                swal({
                    title: '确定要删除吗?',
                    text: '该节将删除',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                }).then(function(isConfirm) {
                    if(isConfirm === true) {
                        sil_loading();
                        $.ajax({
                            type: "post",
                            url: "__URL__/delSeries",
                            data: {
                                'series_id': row.series_id,
                            },
                            dataType: "json",
                            async: true,
                            error: function(request) {
                                toastr.warning("Connection error");
                            },
                            success: function(data) {
                                if(data.state == true) {

                                    toastr.success(data.info);
                                    $('#seriesTable').DataTable().ajax.reload();
                                } else {

                                    toastr.warning(data.info);
                                }
                                sil_reloading();
                            }
                        });
                    } else if(isConfirm === false) {

                    } else {

                    }
                });
            }
        </script>
        
        
        
        
    </body>
</html>